<template>
  <div class="listTemplate">
    <header class="t-header">
        <mu-button flat small class="t-close" v-close><i class="iconfont iconangle-left"></i></mu-button>
        <span class="t-title">检查详情</span>
        
    </header>
    <section class="t-body">
      <mu-paper class="demo-paper" :z-depth="1" style="padding:5px 8px;">
        <mu-stepper :active-step="activeStep" class="stepper-lan">
          <mu-step>
            <mu-step-label>
              <span class="desc">提交问题</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
          <mu-step>
            <mu-step-label>
              <span class="desc">完成整改</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
          <mu-step>
            <mu-step-label>
              <span class="desc">任务指派</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
          <mu-step>
            <mu-step-label>
              <span class="desc">完成复查</span>
              <span class="deTime">2019/10/10</span>
            </mu-step-label>
          </mu-step>
        </mu-stepper>
      </mu-paper>
      <mu-expansion-panel :expand="true">
        <div slot="header">检查人：马云</div>
  
        <section class="box" >
          <p class="line-list textdot">
            <span class="">项目名称：中建八局企业微信项目</span>
          </p>
          <p class="line-list" >
            <span>检查类型：A3-F5</span>
          </p>
          <p class="line-list" >
            <span>所属区域：A3-F5</span>
          </p>
          <p class="line-list textdot">
            <span>检查部位：大梁根基</span>
          </p>
          <p class="line-list" >
            <span>检查表：检查表名称</span>
            <section class="table">
              <div class="tr header">
                <div class="td">测试检查表</div>
              </div>
              <div class="tr subheader">
                <div class="td">检查项</div>
                <div class="td">检查内容</div>
                <div class="td">检查结果</div>
              </div>
              <div class="tr">
                <div class="td">检查项名</div>
                <div class="td"  style="width:200%;">
                  <div class="tr">
                    <div class="td">检查内容1</div>
                    <div class="td">
                      <mu-checkbox label="有隐患" disabled></mu-checkbox>
                      <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                    </div>
                  </div>
                  <div class="tr">
                    <div class="td">检查内容2</div>
                    <div class="td">
                      <mu-checkbox label="有隐患" disabled></mu-checkbox>
                      <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                    </div>
                  </div>
                </div>
                <!-- <div class="td">
                  <div class="td">
                    <mu-checkbox label="有隐患" disabled></mu-checkbox>
                    <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                  </div>
                  <div class="td">
                    <mu-checkbox label="有隐患" disabled></mu-checkbox>
                    <mu-checkbox label="无隐患" v-model="selected" disabled></mu-checkbox>
                  </div>
                </div> -->
                
              </div>
            </section>
          </p>
          <p class="line-list" >
            <span>检查结果：2个问题</span>
          </p>
          <mu-expansion-panel class="noshadow">
            <div slot="header">问题一</div>
            <p class="line-list textdot">
              <span>问题类型：质量问题</span>
            </p>
            <p class="line-list textdot">
              <span>问题等级：一般问题</span>
            </p>
            <section class="img-box">
              现场照片：
              <img src="../../../../assets/img/default.png" />
            </section>
            <p class="line-list textdot" >
              <span>问题描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
            <p class="line-list flex_b">
              <span>平面图标记</span>
              <span class="active-color">查看</span>
            </p>
            <p class="line-list flex_b">
              <span>整改期限：立即整改</span>
            </p>
            <p class="line-list textdot" >
              <span>整改要求：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
            <p class="line-list flex_b">
              <span>责任单位：第三单位</span>
            </p>
             <p class="line-list flex_b">
              <span>整改责任人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
            </p>
            <p class="line-list flex_b">
              <span>抄送人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
            </p>
          </mu-expansion-panel>
          <mu-expansion-panel class="noshadow">
            <div slot="header">问题二</div>
            <p class="line-list textdot">
              <span>问题类型：质量问题</span>
            </p>
            <p class="line-list textdot">
              <span>问题等级：一般问题</span>
            </p>
            <section class="img-box">
              现场照片：
              <img src="../../../../assets/img/default.png" />
            </section>
            <p class="line-list textdot" >
              <span>问题描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
            <p class="line-list flex_b">
              <span>平面图标记</span>
              <span class="active-color">查看</span>
            </p>
            <p class="line-list flex_b">
              <span>整改期限：立即整改</span>
            </p>
            <p class="line-list textdot" >
              <span>整改要求：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
            <p class="line-list flex_b">
              <span>责任单位：第三单位</span>
            </p>
             <p class="line-list flex_b">
              <span>整改责任人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
            </p>
            <p class="line-list flex_b">
              <span>抄送人：
                <mu-avatar color="primary" size="25">兰</mu-avatar>
                兰文亮
              </span>
            </p>
          </mu-expansion-panel>
          
        </section>
      </mu-expansion-panel>
      <mu-expansion-panel class="noshadow">
            <div slot="header">整改责任人：张三</div>
            <p class="line-list textdot">
              <span>整改责任人：张三</span>
            </p>
            <p class="line-list textdot">
              <span>整改完成时间：2019-09-25 15:23</span>
            </p>
            <section class="img-box">
              现场照片：
              <img src="../../../../assets/img/default.png" />
            </section>
            <p class="line-list textdot" >
              <span>整改结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
          </mu-expansion-panel>
          <mu-expansion-panel class="noshadow">
            <div slot="header">任务指派：张三</div>
            <p class="line-list textdot">
              <span>任务指派：张三</span>
            </p>
            <p class="line-list textdot">
              <span>任务指派时间：2019-09-25 15:23</span>
            </p>
          </mu-expansion-panel>
          <mu-expansion-panel class="noshadow">
            <div slot="header">复查人：张三</div>
            <p class="line-list textdot">
              <span>复查人：张三</span>
            </p>
            <p class="line-list textdot">
              <span>复查时间：2019-09-25 15:23</span>
            </p>
            <p class="line-list textdot" >
              <span>复查结果描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
            </p>
            <section class="img-box">
              现场照片：
              <img src="../../../../assets/img/default.png" />
            </section>
            
          </mu-expansion-panel>
    </section>
  </div>
</template>

<script>
export default {
  name: 'mainPage',
  data () {
    return {
      num: 20,
      refreshing: false,
      loading: false,
      text: 'List',
      open:false,
      selected:true,
      activeStep:0,
    }
  },
  mounted(){
    
  },
  created(){
    
  },
  methods:{
   
   
    
  },
}
</script>
<style lang="scss" scoped>
  .listTemplate{
      height:100%;
      width:100%;
      position:relative;
      overflow:hidden;
      .t-header{
          height:0.45rem;
          width:100%;
          color:#3D3D3D;
          box-sizing:border-box;
          padding:5px 8px;
          position:relative;
          // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
          -border-bottom:1px solid #dedede;
          background-color:#fff;
          display:flex;
          justify-content:space-between;
          align-items:center;
          .t-close{
            min-width: 28px;
            border-radius: 50%;
          }
          .t-title{
              position:absolute;
              top:50%;
              left:50%;
              transform:translate(-50%,-50%);
              font-size: 0.19rem; 
              font-weight: 500;
          }
          .t-right-icon{
              font-size:0.2rem;
          }
      }
      .t-body{
          height:calc(100% - 0.45rem);
          width:100%;
          overflow:auto;
          background-color:#F8F8F8;
          padding:10px;
      }
      .t-body + .t-footer{
          height:0.45rem;
          width:100%;
      }
      .t-footer + .t-body{
          height:calc(100% - 0.9rem);
      }
      // 自定义样式
      .box{
        padding:10px 15px;
        background-color:#fff;
      }
      .line-list{
        margin:15px 0;
        font-size:0.15rem;
      }
      .textdot{
        display:block;
        width:100%;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }

    .table{
      width:100%;
      height:auto;
      border:1px solid #dedede;
      font-size:0.12rem;
      line-height:0.2rem;
      .tr{
        width:100%;
        border-bottom:1px solid #dedede;
        display:flex;
        justify-content:space-between;
        align-items:center;
        .td{
          border-left:1px solid #dedede;
          width:100%;
          text-align:center;
          .tr{
            border-bottom:1px solid #dedede;
            border-left:none;
          }
          >.tr:last-child{
            border:none;
          }
        }
        >.td:first-child{
          border:none;
        }
        .tr{
          border-left:1px solid #dedede;
        }
      }
      >.tr:last-child{
        border:none;
      }
      .header{
        background-color:#ddd;
        color:#000;
      }
      .subheader{
        background-color:#eee;
        color:#333;
      }
    }
  }
</style>
<style lang="scss" >
.t-close{
    .mu-button-wrapper{
        padding:0 !important;
    }
}
.active-color{
    color:#FF8A1B;
  }
.td{
  .mu-checkbox-svg-icon{
    height:20px;
    width:20px;
  }
  .mu-checkbox{
    line-height:20px;
    height:20px;
  }
}
.t-body{
  .mu-expansion-panel-header{
    padding:0 10px;
  }
  .mu-expansion-panel-content{
    padding: 0 5px;
  }
  .mu-expansion-panel__expand .mu-expansion-panel-header{
    min-height:20px;
  }
}
.flex_b{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.noshadow.mu-elevation-2{
    box-shadow:none;
  
}
.stepper-lan{
  .mu-step-label{
    position:relative;
    .desc{
        position: absolute;
        top: 5px;
        transform: translateX(-50%);
        left: 50%;
        white-space: nowrap;
        font-size:0.12rem;
    }
    .deTime{
      font-size:0.12rem;
      position: absolute;
      bottom: 5px;
      transform: translateX(-50%);
      left: 50%;
      white-space: nowrap;
      font-size:0.12rem;
    }
  }
}
</style>